<template>
  <div id="login">
    <div class="modle-div">
      <div class="div-left">
        <div class="d-left-logo"></div>
        <h3>智学无忧后台系统</h3>
        <p>做最有态度、良心、责任的IT教育</p>
      </div>
      <div class="div-shu"></div>
      <div class="div-right">
        <!--表单-->
        <el-form class="d-right-form" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
          <el-form-item prop="account" class="d-form-user">
            <el-input
              prefix-icon="el-icon-user-solid"
              type="text"
              v-model="ruleForm.account"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass" class="d-form-pass">
            <el-input
              prefix-icon="el-icon-s-goods"
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-checkbox label="记住密码" name="type" v-model="checked"></el-checkbox>
          <el-form-item class="d-form-login">
            <el-button type="success" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Base from '../uilt/base64.js'//导入加密
import Coke from '../uilt/coke.js'//导入Coke
import {mapActions} from 'vuex'
export default {
  data() {
    var checkacCount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"))
      } else {
        callback()
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        account: "", //账号
        pass: "" //密码
      },
      checked: false, //记住密码
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        account: [{ validator: checkacCount, trigger: "blur" }]
      }
    }
  },
  created(){
    this.getuser()//从cookie拿账号密码
  },
  methods: {
    submitForm(formName) {
      let that=this
      that.$refs[formName].validate(valid => {
        if (valid) {//验证成功
        that.$get("/api/OAuth/authenticate", {
                userMobile: that.ruleForm.account,
                userPassword:that.ruleForm.pass
              }
            ).then((response)=>{
                that.gettoken(response.data.token_type+" "+response.data.access_token)
                that.getuserUid(response.data.profile.userUid)
                that.getcircleUrl(response.data.profile.userHeader)
                that.getuserUserTypeId(response.data.profile.userUserTypeId)//在状态管理中存入userUserTypeId权限
               if(that.checked){
                  let account =Base.base64encode(that.ruleForm.account)//账号加密
                  let pass =Base.base64encode(that.ruleForm.pass)//密码加密
                  let acval=Coke.getCookie("account")//获取加密账号
                    if(acval!=account){//判断cookie存入账号是否是同一个
                      Coke.delCookie ("account")
                      Coke.delCookie ("pass")
                      Coke.setCookie("account",account,30)
                      Coke.setCookie("pass",pass,30)
                    }
                   }else{//否则清除Cookie
                    Coke.delCookie ("account")
                    Coke.delCookie ("pass")
                }
              that.$message.success('登录成功！')
              that.$router.push("/")//跳转首页
            }).catch((error)=>{
              if(error.response.status==401){
                  that.$message.error('账号或密码错误！')
              }else{
                 that.$message.error('服务器内边错误！')
              }
            });
        } else {
           that.$message.error('请输入账号或密码！')
          return false //验证失败
        }
      })
    },
    getuser(){//获取cookie的账号和密码信息
            let that=this
            let acval = Coke.getCookie("account")
            let passval = Coke.getCookie("pass")
              //如果用户名不为空,则给表单元素赋值
             if ( acval  && passval)
              {
                that.ruleForm.account=Base.base64decode(acval)
                that.ruleForm.pass=Base.base64decode(passval)
                that.checked=true
             }
    },
    ...mapActions([
      'gettoken', // 将 `this.gettoken(amount)` 映射为 `this.$store.dispatch('gettoken', amount)`
       'getuserUid',
        'getcircleUrl',
        'getuserUserTypeId'
    ])
  }
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
#login {
  background: url(../assets/background.jpg) no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin:0px;
  padding: 0px;
}
.modle-div {
  border: 2px solid #66b1ff;
  border-radius: 5px;
  width: 500px;
  height: 280px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: #d8ecf5;
  position: relative;
  box-shadow: #66b1ff 0 0 5px 5px;
}
.div-shu {
  width: 1px;
  height: 98%;
  margin: 2px auto;
  background: linear-gradient(to bottom, white, green, white);
}
.div-left {
  width: 49%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.div-left h3 {
  color: #198b79;
  padding-left: 5px;
  text-align: center;
}
.div-left p {
  font-size: 13px;
  margin-top: 20px;
  padding-left: 10px;
  color: gray;
 text-align: center;
}
.d-left-logo {
  width: 70px;
  height: 70px;
  padding: 20px;
  margin: 30px auto 20px;
  background: url("../assets/favicon.jpg") no-repeat 23px 22px;
  background-color: white;
  border-radius: 50%;
}
.div-right {
  width: 49%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
/deep/.el-input__icon {
  color: #198b79;
}
.d-right-form {
  height: 100%;
  width: 100%;
}
.d-form-user,
.d-form-pass {
  width: 80%;
  margin: 40px auto -15px;
}
.el-checkbox {
  margin: 40px 0px 15px 25px;
  float: left;
}
.d-form-login {
  margin: 10px auto -10px;
}
.el-button{
    padding: 12px 83px;
    margin-left: 24px;
}
@media screen and(max-width:550px) {
  #login {
    background-image: none;
  }
  .modle-div {
    border: none;
    width: 300px;
    height: 530px;
    box-shadow: none;
  }
  .div-shu {
    display: none;
  }
  .div-left {
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .div-right {
    width: 100%;
    height: 50%;
    position: absolute;
    top: 45%;
    left: 0;
  }
  .el-checkbox {
    margin: 40px 0px 15px 35px;
    float: left;
  }
  .el-button {
    padding: 12px 104px;
    margin-left: 31px;
}
}
</style>
